<template>
    <div class="body">
        <!-- <router-link to="/addressList" class="my_order"> -->
        <div class="my_order address-content">
            <div class="my_order_div">
            <p class="address">{{$store.getters.userInfo.school_name}}{{$store.getters.userInfo.dormitory_name}}{{$store.getters.userInfo.address_floor_name}}{{$store.getters.userInfo.consignee_address}}</p>
            <p>{{$store.getters.userInfo.consignee_name}}-{{$store.getters.userInfo.consignee_phone}}</p>
            </div>
            <!-- <p class="my_order_icon">
                <i class="iconfont icon-you"></i>
            </p> -->
      <!-- </router-link> -->
      </div>
      <div class="content">
          <div class="my_order">
                <div class="my_order_div">
                    <P>{{$store.getters.shop_name.shop_name}}</P>
                </div>
        </div>
        <div class="my_order" v-for="(item,index) of $store.getters.cart" :key="index" v-show="index < more_num">
                <img class="product-pic" :src="$store.getters.base_url+item.pic">
                <div class="my_order_div">
                    <p>{{item.name}}</p>
                    <p class="goods-num">X{{item.num}}</p>
                </div>
                <p class="item-right-text">￥{{item.price}}</p>
        </div>
        <p v-if="more_num == 3" class="more" @click="more_num = 10000">展开更多<i class="iconfont icon-arrow-down-copy"></i></p>
        <p v-else class="more" @click="more_num = 3">点击收起<i class="iconfont icon-arrow-up"></i></p>
        <!-- <div class="my_order">
            <div class="my_order_div integral">
                <mt-switch v-model="isIntegral" :disabled="parseFloat($store.getters.carriage)+parseFloat($store.getters.total)>=$store.getters.userInfo.integral">可用余额:{{$store.getters.userInfo.integral}}元</mt-switch>
            </div>
        </div> -->
        <div class="my_order">
            <div class="my_order_div integral">
                <p class="left-text">是否配送上楼</p>
                <mt-switch v-model="is_raised"></mt-switch>
            </div>
        </div>
        <!-- <div class="my_order">
            <div class="my_order_div integral">
                <mt-switch v-model="is_raised">是否配送上楼</mt-switch>
            </div>
        </div> -->
        <!-- <div class="my_order">
            <div class="my_order_div">
                <p class="right-text">商品总价:￥{{$store.getters.total}}</p>
            </div>
        </div> -->
            <div class="my_order">
            <div class="my_order_div integral">
                <p class="left-text">上楼费</p>
                <p class="right-text">￥{{getDelivery($store.getters.total,0)}}</p>
            </div>
            </div>
            <div class="my_order">
            <div class="my_order_div integral">
                <p class="left-text">服务费</p>
                <p class="right-text">￥{{getDelivery($store.getters.total,1)}}</p>
            </div>
            </div>
            <div class="my_order">
            <div class="my_order_div integral">
                <p class="left-text">餐盒费</p>
                <p class="right-text">￥{{getBoxFee($store.getters.cart)}}</p>
            </div>
            </div>
            <!-- <div class="my_order">
            <div class="my_order_div">
                <p class="right-text">总计:￥{{getTotal()}}</p>
            </div>
            </div> -->
            <div class="my_order">
                <div class="my_order_div integral">
                    <p class="left-text">备注:</p>
                    <textarea v-model="remark" placeholder="填写商品备注" cols="35" rows="2" class="remark"></textarea>
                </div>
            </div>
        </div>
        <div class="submit-bar">
            <div class="submit-money">
                <p class="all-total">合计:￥{{getTotal()}}</p>
                <p class="goods-total">商品:￥{{$store.getters.total}}</p>
            </div>
            <mt-button class="btn" @click="subOrder">提交订单</mt-button>
        </div>
    </div>
</template>
<script>
import { newOrder,pay } from '../api'
import {Toast,MessageBox} from 'mint-ui'
import {checkTime} from '../time'
export default {
    name:'creatOrder',
    data() {
        return {
            remark:"",
            isIntegral:false,
            is_raised:false,
            floor_price:0,
            more_num:3
        }
    },
    created(){
        // console.log(this.$store.getters.userInfo);
        this.shop_info = this.$store.getters.shop_name;
        console.log(checkTime(this.shop_info.send_range));
            if(!checkTime(this.shop_info.send_range)){
                MessageBox.alert(`订单将在${this.shop_info.send_range}开始配送`, '送货提示');
            }
    },
    methods:{
        toastMsg(){
            Toast('暂不支持配送上楼服务');
        },
        getBoxFee(cart){
            let total = 0;
            for(let i of cart){
                console.log(i);
                total += i.num*i.lunchbox_fee;
            }
            console.log(total);
            return total.toFixed(2);
        },
        getDelivery(p,a){
            const delivery = this.$store.getters.delivery;
            p = parseFloat(p);
            for(let i of delivery){
                if(p>=parseFloat(i[0]) && p<=parseFloat(i[1])){
                    if(a){
                        return i[2];
                    }else{
                        if(this.is_raised){
                            return i[3];
                        }else{
                            return 0;
                        }
                    }
                }
            }
        },
        getTotal(){
            return (parseFloat(this.getBoxFee(this.$store.getters.cart)) + parseFloat(this.getDelivery(this.$store.getters.total,1)) + parseFloat(this.getDelivery(this.$store.getters.total,0)) + parseFloat(this.$store.getters.total)).toFixed(2);
        },
        subOrder(){
            MessageBox.confirm(`${this.$store.getters.shop_name.is_refues?'该商铺可退单,是否确认下单':'该商铺不可退单,是否确认下单'}`,{
                title:'下单提示'
            }).then(action => {
                // console.log(window.location.host);
                const data = {store_id:this.$route.query.store_id,
                    token:this.$store.getters.token,
                    user_id:this.$store.getters.userInfo.id,
                    total:this.$store.getters.total,
                    remark:this.remark,
                    delivery_price:this.getDelivery(this.$store.getters.total,1),
                    floor_price:this.getDelivery(this.$store.getters.total,0),
                    pay_type:this.isIntegral?1:0,
                    address_id:this.$store.getters.userInfo.address_id,
                    is_raised:this.is_raised?1:2,
                    lunchbox_price:this.getBoxFee(this.$store.getters.cart)
                }
                newOrder(data).then(res=>{
                    console.log(res);
                    Toast(res.msg)
                    if(res.code == 202){
                        this.$store.commit("YUE",parseFloat(this.$store.getters.carriage)+parseFloat(this.$store.getters.total))
                        // window.location.href = `http://${window.location.host}/#/payState?state=1`;
                        return;
                    }else if(res.code == 201){
                        this.$router.push({path:'/payState',query:{state:0}})
                        return;
                    }
                    const paramsData={ 
                        token:this.$store.getters.token,
                        order_no:res.data.order_no,
                        openid:this.$store.getters.userInfo.openid,
                        // total_price:(this.getFloorDelivery()*1000+this.$store.getters.total*1000)/1000
                    }
                    pay(paramsData).then(res=>{
                        console.log(res.data);
                        let params = res.data;
                            WeixinJSBridge.invoke(
                                'getBrandWCPayRequest', {
                                    "appId":params.appId,   //公众号名称，由商户传入     
                                    "timeStamp":params.timeStamp,         //时间戳，自1970年以来的秒数     
                                    "nonceStr":params.nonceStr, //随机串
                                    "package":params.package,     
                                    "signType":params.signType,         //微信签名方式
                                    "paySign":params.paySign //微信签名 
                                },
                                function(res){
                                    console.log(res);
                                if(res.err_msg === "get_brand_wcpay_request:ok" ){
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                        // this.$router.push({path:'payState',query:{state:true}})
                                        
                                        // window.location.href = `http://${window.location.host}/#/payState?state=1`
                                        window.location.href = `http://${window.location.host}/userplat/#/payState?state=1`
                                }else{
                                        // this.$router.push({path:'payState',query:{state:false}})
                                        // window.location.href = `http://${window.location.host}/#/payState?state=0`
                                        window.location.href = `http://${window.location.host}/userplat/#/payState?state=0`
                                } 
                            }); 
                    })
                })
            }).catch();
        }
    }
}
</script>
<style scoped>
    .body{
        background: #eee;
        padding: 1rem;
        padding-bottom: 4rem;
    }
    .my_order{
        background: #fff;   
        margin: auto;   
    }
    .my_order_div {
        display: flex;
        flex-direction: column;
        line-height: 1.5rem;
    }
    .address-content{
        border-radius: 0.4rem;
        margin-bottom: 0.4rem;
    }
    .address {
        font-size: 1.4rem;
        font-weight: bolder;
        line-height: 2.4rem;
    }
    .product-pic {
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
    }
    .item-right-text {
        margin-right: 1rem;
    }
    .remark {
        border: none;
        padding:0.2rem;
        font-size: 0.8rem;
        color:#666;
        font-weight: bolder;
    }
    .remark:focus{
        outline: none;
    }
    .body >>> .mint-switch-input:checked + .mint-switch-core{
        border-color: #EC5D3D;
        background-color: #EC5D3D;
    }
    .right-text {
        text-align: right;
        padding-right: 1rem;
    }
    .btn {
        width: 25%;
        border-radius: 0;
        margin: 0;
        height: 3rem;
        color: #fff;
        background: #F23D3D;
        font-size: 1rem;
        text-align: center;
        /* position: fixed; */
        /* bottom: 0; */
    }
    .integral{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .mint-switch{
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-right: 1rem;
    }
    .submit-bar{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }
    .all-total{
        font-size: 1rem;
        font-weight: 600;
    }
    .submit-money{
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-left: 1rem;
    }
    .goods-total{
        font-size: 0.8rem;
        color:#666;
    }
    .goods-num{
        font-size: 0.6rem;
        color: #666;
    }
    .content{
        border-radius: 0.4rem;
        overflow: hidden;
    }
    .more{
        text-align: center;
        background: #fff;
        font-size: 0.8rem;
        color: #666;
    }
    .more .iconfont{
        margin: 0 0.2rem;
    }
    .left-text{
        font-size: 0.9rem;
    }
</style>